<template>
  <div class="knowledge_list">
    <c-title :hide="false" :text="'知识库搜索'"></c-title>
    <div class="search-box">
      <div class="search">
        <img v-if="logo_url" :src="logo_url" style="width: 1.6rem; height: 1.6rem;" alt="">
        <van-search @search="search" shape="round" style="padding: 0 10px; width: 100%;" v-model="keyword" placeholder="请输入搜索关键词">
        </van-search>
      </div>
      <div v-if="keyWorkds&&keyWorkds.length > 0" class="keyWorkds-box van-ellipsis">推荐：<span @click="clickKeyword(key)" class="key" v-for="(key, ind) in keyWorkds" :key="ind">{{key}}<span v-if="ind < (keyWorkds.length - 1)">、</span></span></div>
    </div>
    <van-list :finished="finished" finished-text="没有更多了" @load="onLoad">
      <list :plu="getPlugin" :list="list" :itemOption='itemOption'></list>
    </van-list>
  </div>
</template>


<script type="text/javascript">

export default {
  components: {
    list: () => import("./components/list.vue")
  },
  data() {
    return {
      keyword: "",
      list: [],
      logo_url: "",
      last_page: "",
      finished: false,
      loading: false,
      current_page: 1,
      keyWorkds: [],

      plugin: 'message-base',//message-base商城知识库，project-template供应链知识库
      apiOption: {},
      itemOption: {
        article_name: 'article_name',
        creater_name: 'creater_name',
        base_name: 'base_name',
        created_at: 'created_at'
      }
    };
  },
  mounted() {
    this.keyword = '';
    this.init();
    this.keyword = this.$route.query.keyword || "";
  },
  methods: {
    init() {
      this.list = [];
      this.current_page = 1;
      this.finished = false;
      this.loading = false;

      let api = new Map([
        ["message-base", {
          index: 'plugin.message-base.frontend.article.index',
          params: ()=>{
            return {keyword: this.keyword, page: this.current_page}
          },
          callback:(res)=>{
            this.keyWorkds = res.data.keyword || this.keyWorkds;
            this.current_page += 1;
            let { data, logo, current_page, last_page } = res.data;
            this.logo_url = logo;
            let list = this.keyword == "" ? data : data.filter(r => {
              let str = new RegExp(this.keyword, 'g');
              let newstr = `<span style="color:#e44848;">${this.keyword}</span>`;
              r.article_name = r.article_name.replace(str, newstr);
              return r;
            });
            this.list = this.list.concat(list);
            if (current_page >= last_page) this.finished = true;
          }}
        ],
        ["project-template", {
          index: 'plugin.project-template.frontend.knowledge.searchKnowledgeBaseList',
          params: ()=>{
            return {title: this.keyword, page: this.current_page}
          },
          callback:(res)=>{
            this.keyWorkds = res.data.keyword || this.keyWorkds;
            this.current_page += 1;
            let { data, current_page, last_page } = res.data;
            let list = this.keyword == "" ? data : data.filter(r => {
              let str = new RegExp(this.keyword, 'g');
              let newstr = `<span style="color:#e44848;">${this.keyword}</span>`;
              r.article_name = r.article_name&&r.article_name.replace(str, newstr)||'';
              return r;
            });
            this.list = this.list.concat(list);
            if (current_page >= last_page) this.finished = true;

            this.itemOption = {
              article_name: 'title',
              base_name: 'has_one_yz_supply_knowledge_base.title',
              created_at: 'release_time_at'
            };
          }}
        ],
        ["project-template-good", {
          flag: 'project-template',
          index: 'plugin.project-template.frontend.knowledge.searchKnowledgeBaseArticleList',
          params: ()=>{
            return {title: this.keyword, page: this.current_page,goods_id: this.$route.query.gid}
          },
          callback:(res)=>{
            this.keyWorkds = res.data.keyword || this.keyWorkds;
            this.current_page += 1;
            let { data, current_page, last_page } = res.data;
            let list = this.keyword == "" ? data : data.filter(r => {
              let str = new RegExp(this.keyword, 'g');
              let newstr = `<span style="color:#e44848;">${this.keyword}</span>`;
              r.article_name = r.article_name&&r.article_name.replace(str, newstr)||'';
              return r;
            });
            this.list = this.list.concat(list);
            if (current_page >= last_page) this.finished = true;

            this.itemOption = {
              article_name: 'title',
              base_name: 'has_one_yz_supply_knowledge_base.title',
              created_at: 'release_time_at'
            };
          }}
        ],
      ]);
      if(this.$route.query.plu) {
        this.plugin = this.$route.query.plu;
      }
      this.apiOption = api.get(this.plugin);
      this.getPlugin = this.apiOption.flag?this.apiOption.flag:this.plugin;
    },
    search() {
      this.init();
      this.onLoad();
    },
    clickKeyword(text) {
      this.keyword = text;
      this.search();
    },
    onLoad() {
      if (this.finished || this.loading) return;
      this.loading = true;
      $http.get(this.apiOption.index, this.apiOption.params(),'.').then(res => {
        if (res.result == 1) {
          this.apiOption.callback(res);
        }
        this.loading = false;
      });
    }
  },
};
</script>
<style lang="scss" scoped>
  .knowledge_list {
    width: 100%;
    min-height: 100vh;
    text-align: left;
    background-color: #eff0f1;

    .search-box {
      background-color: #fff;
      padding: 0.6rem 0.8rem;
    }

    .search {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 0.3rem;
    }

    .keyWorkds-box {
      font-size: 12px;

      .key {
        color: rgb(58, 117, 244);
      }
    }
  }

</style>
